<template>
  <layout-slot :reArticle="reArticle" className="common-page main-content" class="bg-white">
    <source-slot/>
    <div class="common-item">
      <div class="common-title">
        标签 : {{ $route.params.url }}
      </div>
      <div class="post-lists">
        <div class="post-lists-body">
          <div class="post-list-item" v-for="(tmp,index) of tagArticles">
            <div class="post-list-item-container  bg-green">
              <a :href="tmp.url">
                <div class="item-label " :class="bgColor[index % bgColor.length]">
                  <div class="item-title">{{ tmp.name }}</div>
                  <div class="item-meta clearfix">
                    <div class="item-meta-ico bg-ico-book"
                         :style="{
                                background: `url(https://rawchen.com/usr/themes/rawchen/images/bg-ico.png) no-repeat`,
                                backgroundSize: `40px auto`,
                                backgroundPosition:`0 -${(index % 10) * 40}px !important`,}">
                    </div>
                    <div class="item-meta-date">{{tmp.date | dateFormat('{y}-{m}-{d}') }}</div>
                  </div>
                </div>
              </a>
            </div>
          </div>

        </div>
      </div>
    </div>
  </layout-slot>
</template>

<script>


  import { getLink } from '~/api/category'
  import { getMoviesDetail, getReArticle, getTagArticle, recordCount } from '~/api'

  export default {
    name: "archives",

    data() {
      return {
        statistics: {
          articles: '123+',
          labels: '215+',
          comments: '551+',
          ip: "82860+",
          views: "654813+"
        },
        bgColor: ['bg-green', 'bg-red', 'bg-blue', 'bg-purple', 'bg-orange', 'bg-yellow'],
        categories: [],
        tagArticles: [],
        reArticle:[]
      }
    },

    methods: {
      /**
       * 取出某个标签下的所有文章
       */
      getTagArticle() {
        this.$store.commit("setLoading",true)
        getTagArticle({tagName: this.$route.params.url}).then(({data}) => {
          this.tagArticles = data.data.map((item) => {
            return {
              name: item.articleTitle,
              date: item.articleCreated,
              url: "/article-detail/" + item.oId
            }
          })
          this.$store.commit("setLoading",false)
        })
      }
    },
    mounted() {
      //this.getTagArticle()
    },
    async asyncData({app,params}){
      let crossList = [],pageInfo = {},links = [],tagArticles = []
      await getTagArticle(app.$axios,{tagName: params.url}).then(({data}) => {
        tagArticles = data.data.map((item) => {
          return {
            name: item.articleTitle,
            date: item.articleCreated,
            url: "/article-detail/" + item.oId
          }
        })
      })
      let reArticle = await getReArticle(app)
      return { reArticle,tagArticles}
    }
  }
</script>

